`{% extends 'layout.html' %}

{% load static %}

{% block title %}
    <title>登陆界面</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/login_register.css' %}">
{% endblock %}

{% block content %}
    <div class="content">
        {#    遮盖盒子#}
        <div class="pre-box">
            <h1>WELCOME</h1>
            <p>欢迎使用</p>
            <div class="img-box">
                <img src="../static/img/3.jpg" alt="">
            </div>
        </div>

        {#        注册界面#}
        <div class="sign-up-container">
            <form method="post" novalidate>
                {% csrf_token %}
                {# 添加隐藏字段区分登录和注册 #}
                <input type="hidden" name="form_type" value="register">
                <div class="title-box">
                    <h1>注册</h1>
                    {#                    <p>欢迎使用本系统</p>#}
                </div>
                <div class="input-container">
                    {#                    <input type="text" placeholder="用户名">#}
                    {#                    <input type="password" placeholder="密码">#}
                    {#                    <input type="password" placeholder="确认密码">#}
                    {% for field in register_form %}
                        {{ field }}
                        {% if field.errors %}
                            <span>{{ field.errors.0 }}</span>
                        {% endif %}
                    {% endfor %}
                </div>
                <div class="btn-box">
                    <button>注册</button>
                    <p onclick="mySwitch()">已有账号？去登录</p>
                </div>
            </form>
        </div>

        {#        登陆界面#}
        <div class="sign-in-container">
            <form method="post" novalidate>
                {% csrf_token %}
                {# 添加隐藏字段区分登录和注册 #}
                <input type="hidden" name="form_type" value="login">
                <div class="title-box">
                    <h1>登录</h1>
                    {#                    <p>欢迎使用本系统</p>#}
                </div>
                <div class="input-container">
                    {#                    <input type="text" placeholder="用户名">#}
                    {#                    <input type="password" placeholder="密码">#}
                    {% for field in login_form %}
                        {{ field }}
                        {% if field.errors %}   
                            <span>{{ field.errors.0 }}</span>
                        {% endif %}
                    {% endfor %}
                </div>
                <div class="btn-box">
                    <button>登录</button>
                    <p onclick="mySwitch()">没有账号？去注册</p>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
          $(document).ready(function() {
              // 从Django模板获取正确的布尔值
              let isSignUp = {{ is_signup|yesno:"true,false" }};
              const preBox = $(".pre-box");
              const img = $(".img-box img");

              // 根据isSignUp初始化遮罩位置
              function initializeMask() {
                  if (isSignUp) {
                      preBox.css({
                          transform: "translateX(100%)",
                          backgroundColor: "#FED5A5"
                      });
                      img.attr("src", "../static/img/2.jpg");
                  } else {
                      preBox.css({
                          transform: "translateX(0%)",
                          backgroundColor: "#FFBD7B"
                      });
                      img.attr("src", "../static/img/3.jpg");
                  }
              }

              // 页面加载时立即初始化
              initializeMask();

              // 切换函数（绑定到点击事件）
              window.mySwitch = function() {
                  isSignUp = !isSignUp;
                  initializeMask();
              };
          });

    </script>
{% endblock %}